<template>
  <div style="color:darkorange">
    <el-dialog :visible.sync="centerDialogVisible"
               class="abow_dialog"
               center
               title="确认排课">
      <div style="color:darkorange;text-align: center;margin: auto; width: max-content; max-height: 100%">
        {{this.name}}<br>
        选择的机房:
        <pre>{{this.showStirng}}
        </pre>
        <div class="inline-block"
             style="color: red;margin-top: -10px;"
             v-if="!this.okay">
          *设备数量不足！
        </div><br>
        <div class="inline-block"
             style="color: red;"
             v-if="!this.okay2">
          *选择的排课不在同一天！
        </div><br>
        <div class="inline-block"
             style="color: red;"
             v-if="!this.okay3">
          *选课周次冲突！
        </div><br>
        <div style="text-align: center;">
          <el-button class="botton"
                     @click="centerDialogVisible = false">取 消</el-button>
          <el-button class="botton"
                     v-if="this.okay&&this.okay2&&this.okay3"
                     @click="insertConfirm()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    筛选申请：<template>
      <el-select v-model="to_term"
                 @change="loadOption()"
                 class="input"
                 clearable
                 style="width: 130px;"
                 placeholder="学期">
        <el-option v-for="item in termOption"
                   :key="item.semesterId"
                   :label="item.term"
                   :value="item.term">
        </el-option>
      </el-select>
    </template>&nbsp;
    <template>
      <el-select v-model="to_state"
                 @change="loadOption()"
                 class="input"
                 clearable
                 style="width: 100px;"
                 placeholder="是否排课">
        <el-option v-for="item in stateOption"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </template>&nbsp;
    申请选择：<template>
      <el-select v-model="name"
                 value-key="reqId"
                 @change="selectChange"
                 class="input3"
                 clearable
                 style="width: 60%;"
                 placeholder="排课申请">
        <el-option v-for="item in teaReqOption"
                   :key="item.trId"
                   :label="
                   item.term+'-申请教师:'+
                   item.user.name+'-课程:'+
                   item.lessonName+'-类型:'+
                   item.labTypeString+'-班级:'+
                   item.stuClass+'-人数:'+
                   item.stuNum+'-周次:'+
                   item.startWeek+'-'+
                   item.endWeek+'-申请节次:'+
                   item.sectionString+'-'+
                   item.stateString"
                   :value="item">
        </el-option>
      </el-select>
    </template>&nbsp;
    <el-button class="botton"
               @click="dialogShow()">确认</el-button>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :span-method="objectSpanMethod"
                :row-style="{ color: 'darkorange', height: '60px' }"
                fit
                style="width: 100%"
                @selection-change="HandleSelectChange">
        <el-table-column label="星期"
                         width="100px"
                         prop="weekdayString"></el-table-column>
        <el-table-column label="实验室"
                         width="150px"
                         prop="lab.labName"></el-table-column>
        <el-table-column label="机房"
                         width="100px"
                         prop="lab.labId"></el-table-column>
        <el-table-column label="设备数量"
                         width="100px"
                         prop="lab.equipment"></el-table-column>
        <el-table-column label="1~2"
                         v-if="this.section==0"
                         prop="strings[0]"></el-table-column>
        <el-table-column label="3~5"
                         v-if="this.section==1"
                         prop="strings[1]"></el-table-column>
        <el-table-column label="6~7"
                         v-if="this.section==2"
                         prop="strings[2]"></el-table-column>
        <el-table-column label="8~9"
                         v-if="this.section==3"
                         prop="strings[3]"></el-table-column>
        <el-table-column label="10~12"
                         v-if="this.section==4"
                         prop="strings[4]"></el-table-column>
        <el-table-column label="13~15"
                         v-if="this.section==5"
                         prop="strings[5]"></el-table-column>
        <el-table-column type="selection"
                         :selectable="isDisabled"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      centerDialogVisible: false,
      insertOrUpdate: false,
      tableData: [],
      stateOption: [{
        value: 0,
        label: "未排课"
      }, {
        value: 1,
        label: "已排课"
      }],
      teaReqOption: '',
      termOption: '',

      show_weekDay: '',
      show_labId: '',
      name: '',
      reqId: '',
      in_req: '',
      in_weekDay: '',
      in_labId: '',
      section: '',
      to_trId: '',
      to_state: '',
      to_term: '',
      cellList: [],
      cellList2: [],
      count: null,

      showStirng: '',
      okay: false,
      okay2: false,
      okay3: false,
      multipleSelection: [],
      arrangeList: []
    };
  },
  methods: {
    isDisabled (row) {
      if (row.state) {
        return 0;
      }
      return 1;
    },
    HandleSelectChange (val) {
      this.multipleSelection = val;
      this.arrangeList.length = 0
    },
    dialogShow () {
      if (this.multipleSelection.length === 0) {
        this.$message("请选择需要排课的实验室")
        return
      }
      this.showStirng = ''
      var tmpSum = 0
      this.okay2 = true
      this.okay3 = true
      this.insertOrUpdate = !this.in_req.state
      var weekdayOkay = this.multipleSelection[0].weekday
      for (var i = 0; i < this.multipleSelection.length; i++) {
        tmpSum = tmpSum + this.multipleSelection[i].lab.equipment
        if (weekdayOkay != this.multipleSelection[i].weekday) {
          this.okay2 = false
        }
        if (this.multipleSelection[i].state === true) {
          this.okay3 = false
        }
        this.showStirng = this.showStirng + "机房：" + this.multipleSelection[i].labId + " " + this.multipleSelection[i].weekdayString + "\n"
        var tmp = {
          trId: this.in_req.trId,
          labId: this.multipleSelection[i].labId,
          weekday: this.multipleSelection[i].weekday
        }
        this.arrangeList.push(tmp)
      }
      this.okay = (tmpSum >= this.in_req.stuNum)
      this.centerDialogVisible = true
    },
    async insertConfirm () {
      if (this.insertOrUpdate) {
        await this.$http.post("/arrange", this.arrangeList, { headers: { 'userId': this.token } }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          else { this.$message("排课成功") }
        })
        this.in_req.state = 1
        this.name =
          this.in_req.term + '-申请教师:' +
          this.in_req.user.name + '-课程:' +
          this.in_req.lessonName + '-类型:' +
          this.in_req.labTypeString + '-班级:' +
          this.in_req.stuClass + '-人数:' +
          this.in_req.stuNum + '-周次:' +
          this.in_req.startWeek + '-' +
          this.in_req.endWeek + '-申请节次:' +
          this.in_req.sectionString + '-' +
          this.in_req.stateString
        this.in_req.stateString = "已排课"
        await this.$http.get("/teaReq/" + this.in_req.trId, { headers: { 'userId': this.token } }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
        })
        this.loadOption()
        this.selectChange(this.in_req)
        this.centerDialogVisible = false
        this.arrangeList.length = 0
      }
      else if (!this.insertOrUpdate) {
        await this.$http.put("/arrange", this.arrangeList, {
          headers: { 'userId': this.token }
        }).then((res) => {
          if (res.data.success === false) { this.$message(res.data.errorMsg) }
          else { this.$message("修改排课成功") }
        })
        this.centerDialogVisible = false
        this.load()
      }
    },
    computeCell () {
      this.cellList.length = 0
      this.cellList2.length = 0
      for (let i in this.tableData) {
        if (i == 0) {
          this.cellList.push(1);
          this.count = 0;
        } else {
          if (this.tableData[i].weekdayString !== null && this.tableData[i].weekdayString == this.tableData[i - 1].weekdayString) {
            this.cellList[this.count] += 1;
            this.cellList.push(0);
          } else {
            this.cellList.push(1);
            this.count = i;
          }
        }
      }
      for (let i in this.tableData) {
        if (i == 0) {
          this.cellList2.push(1);
          this.count = 0;
        } else {
          if (this.tableData[i].weekdayString == this.tableData[i - 1].weekdayString &&
            this.tableData[i].lab.labName == this.tableData[i - 1].lab.labName) {
            this.cellList2[this.count] += 1;
            this.cellList2.push(0);
          } else {
            this.cellList2.push(1);
            this.count = i;
          }
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 1) {
        const rowCell = this.cellList2[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    selectChange (data) {
      this.in_req = JSON.parse(JSON.stringify(data))
      this.name = data.term + '-申请教师:' +
        data.user.name + '-课程:' +
        data.lessonName + '-类型:' +
        data.labTypeString + '-班级:' +
        data.stuClass + '-人数:' +
        data.stuNum + '-周次:' +
        data.startWeek + '-' +
        data.endWeek + '-申请节次:' +
        data.sectionString + '-' +
        data.stateString
      this.reqId = this.in_req.trId
      this.load()
    },
    async load () {
      this.tableData = null
      console.log("in_req", this.in_req);
      await this.$http.get("/arrange/teaArrange/" + this.in_req.trId, { headers: { 'userId': this.token } }).then((res) => {
        if (res.data.success === false) { this.$message(res.data.errorMsg) }
        else { this.tableData = res.data.data; }
      })
      this.section = this.in_req.section
      this.computeCell()
    },
    loadOption () {
      this.teaReqOption = null
      this.$http.post("/teaReq/1", {
        term: this.to_term,
        state: this.to_state
      }, { headers: { 'userId': this.token } }).then((res) => {
        if (res.data.success === false) { this.$message(res.data.errorMsg) }
        else { this.teaReqOption = res.data.data }
      })
    },
    loadTerm () {
      this.$http.post("/semester/1", {
      }).then((res) => {
        if (res.data.success === false) { this.$message(res.data.errorMsg) }
        else { this.termOption = res.data.data }
      })
    }
  },
  created () {
    this.loadTerm()
    this.loadOption()
  },
};
</script>


<style scoped>
::v-deep .el-dialog {
  background-color: #525151;
  border: 1px solid darkorange;
  width: fit-content;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}
.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100%;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100%;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
::v-deep .el-table .cell {
  white-space: pre-line;
}
</style>